<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<meta http-equiv="X-UA-Compatible" content="E=edge;chrome=1" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" type="text/css" href="<%=path%>/static/css/reset.css">
		<link rel="stylesheet" type="text/css" href="<%=path%>/static/css/weui.min.css">
		<link rel="stylesheet" type="text/css" href="<%=path%>/static/css/index.css">
		<title>嘉华金融</title>
	
    </head>
   <body>
	<div class="page">
		<div class="header">
			<div><div class="back"></div></div>
			<div>分销统计</div>
			<div><!-- <div class="user-img"></div> --></div>
		</div>
		<div class="main">
			<div class="distribution-wrap border-bottom">
				<div>
					<div class="searchbar">
					    <div class="cal left"></div>
						<input class="weui-input left data" id="showDatePicker" readonly>
						<div class="search right"></div>
					</div>
				</div>
			</div>
			<div class="distribution-ring border-bottom border-top">
				<div>
					<div class="title-circle left"></div>
					<div class="title left">产品分润收益占比</div>
				</div>
				<div class="ring-wrap" id="ringWrap" style="height: 18rem"></div>
			</div>
            <div class="distribution-table">
                <div>
                    <div class="title-circle left"></div>
                    <div class="title left">产品分润收益占比</div>
                </div>
                <div class="dis-table">
                    <table>
                        <thead>
                            <tr>
                                <th>产品</th>
                                <th>点击次数</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
		</div>
		
	</div>
</body>
<script type="text/javascript" src="<%=path%>/static/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="<%=path%>/static/js/weui.min.js"></script>
<script type="text/javascript" src="<%=path%>/static/js/echarts.common.min.js"></script>
<script>
    var path="<%=path%>";
    /* $('#showDatePicker').on('click', function () {
        weui.datePicker({
            start: 1990,
            end: new Date().getFullYear(),
            onChange: function (result) {
            },
            onConfirm: function (result) {
                $(".data").val(result)
            }
        });
    }); */
    
    $('#showDatePicker').on('click', function () {
        weui.datePicker({
            start: 1990,
            end: new Date().getFullYear(),
            onChange: function() {
            },
            onConfirm: function (result) {
                var year = result[0] + "年";
                var month = result[1] + "月"
                var day = result[2] + "日"
                var date=result[0]+"-"+ result[1]+"-"+result[2] ;
                $(".data").val(date)
            }
        });
    });
    
    $(function(){
    	ajax();
    })
 
    var data1=[];
    var data2=[];
    function ajax(){
     var date=$("#showDatePicker").val();
	   	 $.ajax({
	         url:path+"/member/statistics.html",
	         data:{
	        	 date:date 
	          },
	         type : "POST",
	         datatype : "json",
	         async: false,
	         success : function(datas) {
	        	var html=""; 
	            var json =eval("("+datas+")");
	            $("tbody").remove();
	            data1.splice(0,data1.length);
	            data2.splice(0,data2.length);
	            $.each(json.data, function (index, item) {
	            	data1.push(item.platfromId);
	            	var sel= {
	                        value: item.clickNum,
	                        name:item.platfromId
	                    }
	            	data2.push(sel);
	            	html+='<tbody>'
	                html+='<tr class="tab-tr">';
                	html+='<td>'+item.platfromId+'</td>';
                	html+='<td>'+item.clickNum+'</td>';
                	html+='</tr>';
                	html+='</tbody>'
	           })
	           $("thead").after(html);
	            chart(); 
	          }
	        });
    }
    
    $(".right").click(function(){
    	ajax();	
    })
    
    function chart(){
    	var myChart = echarts.init(document.getElementById('ringWrap'));
        var option = {
      		 tooltip: {
      		        trigger: 'item',
      		        formatter: "{a} <br/>{b}: {c} ({d}%)"
      		    },
            legend: {
                orient: 'horizontal',
                show:true,
                x: 'center',
                bottom: 0,
                data:data1
            },
            series: [
                {
                    name:'访问来源',
                    type:'pie',
                    radius: ['50%', '70%'],
                    center: ['50%', '40%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:data2
                }
            ]
        };
        myChart.setOption(option);	
    }
    
    
    $('.back').on('click', function () {
        window.location=path+"/member/memberCenter.html";
    });

</script>
</html>
